<template>
    <el-drawer v-bind="$attrs" :show-close="false" :with-header="false" size="350px" class="setting-drawer"
        append-to-body @opened="useModalSize" @close="useModalSize(false)">
        <div class="setting-item forbid-select">
            <div class="flex-display-center default-style title">字号：</div>
            <div style="display: flex" class="font-size-setting">
                <div class="font-size-button default-style cursor-pointer" @click="decrease">
                    <el-icon class="font-size-button-icon minus">
                        <component :is="getIcon('minus')" />
                    </el-icon>
                </div>
                <div class="flex-display-center font-size-info default-style">{{ config.fontSize }}</div>
                <div class="font-size-button default-style cursor-pointer" @click="increase">
                    <el-icon class="font-size-button-icon plus">
                        <component :is="getIcon('plus')" />
                    </el-icon>
                </div>
            </div>
        </div>
        <div class="setting-item forbid-select">
            <div class="flex-display-center default-style title">字体：</div>
            <el-select v-model="config.fontFamily" class="input-auto-resize default-style" popper-class="normal-poper"
                @change="fontFamilyChange" style="width: calc(100% - 100px) !important">
                <el-option :label="`字体-${index + 1}`" :value="key" :key="index"
                    v-for="(key, index) in Object.keys(fontInfo)" :style="getStyle(key)" />
            </el-select>
        </div>
        <div class="setting-item forbid-select">
            <div class="flex-display-center default-style title">主题：</div>
            <el-switch v-model="config.lightTheme" @change="changeTheme" :active-action-icon="getIcon('Sunny')"
                :inactive-action-icon="getIcon('Moon')" class="forbid-select fit-auto-resize cursor-pointer" />
        </div>
        <div class="setting-item forbid-select">
            <div class="flex-display-center default-style title">毛玻璃效果：</div>
            <el-switch v-model="config.glass" @change="changeGlass" active-text="开启" inactive-text="关闭" inline-prompt
                style="--el-switch-on-color: #13ce66; --el-switch-off-color: #ff4949"
                class="forbid-select fit-auto-resize cursor-pointer" />
        </div>
        <div class="setting-item forbid-select">
            <div class="flex-display-center default-style title">TagMenu：</div>
            <el-switch v-model="config.showTagMenu" @change="changeTagMenuShow" active-text="开启" inactive-text="关闭"
                inline-prompt style="--el-switch-on-color: #13ce66; --el-switch-off-color: #ff4949"
                class="forbid-select fit-auto-resize cursor-pointer" />
        </div>
        <div class="setting-item forbid-select">
            <div class="flex-display-center default-style title">Header：</div>
            <el-switch v-model="config.showHeader" @change="changeHeaderShow" active-text="开启" inactive-text="关闭"
                inline-prompt style="--el-switch-on-color: #13ce66; --el-switch-off-color: #ff4949"
                class="forbid-select fit-auto-resize cursor-pointer" />
        </div>
        <div class="setting-item forbid-select">
            <div class="flex-display-center default-style title">元素波纹：</div>
            <el-switch v-model="config.showElRipple" active-text="开启" inactive-text="关闭" inline-prompt
                style="--el-switch-on-color: #13ce66; --el-switch-off-color: #ff4949"
                class="forbid-select fit-auto-resize cursor-pointer" />
        </div>
        <div class="setting-item forbid-select">
            <div class="flex-display-center default-style title">鼠标波纹：</div>
            <el-switch v-model="config.showMouseRipple" active-text="开启" inactive-text="关闭" inline-prompt
                style="--el-switch-on-color: #13ce66; --el-switch-off-color: #ff4949"
                class="forbid-select fit-auto-resize cursor-pointer" />
        </div>
        <div class="setting-item forbid-select">
            <div class="flex-display-center default-style title">泡泡拖尾：</div>
            <el-switch v-model="config.showPaoPao" active-text="开启" inactive-text="关闭" inline-prompt
                style="--el-switch-on-color: #13ce66; --el-switch-off-color: #ff4949"
                class="forbid-select fit-auto-resize cursor-pointer" />
        </div>
    </el-drawer>
</template>

<script setup>
import { getIcon } from "@/utils/tools"
import { config, changeTheme, changeGlass, decrease, increase, fontFamilyChange, fontInfo, changeHeaderShow, changeTagMenuShow } from "@/utils/setting"
import { useModalSize } from "@usehook"

const getStyle = (key) => {
    return `font-weight: ${fontInfo[key] ? 'bold' : 'normal'};font-family: ${key === 'default' ? "fojiya, cursive, monospace" : key};`
}

</script>

<style scoped>
.font-size-setting {
    border: 1px solid var(--border-color);
    width: calc(100% - 100px);
    border-radius: var(--border-radius);
    height: 34px;
}

:deep(.font-size-button) {
    background: var(--button-color);
    padding: 5px;
}

:deep(.font-size-info) {
    width: 100%;
    height: 32px;
}

:deep(.font-size-button-icon) {
    font-size: 20px;
    color: #99a9bf;
}

:deep(.font-size-button:first-child) {
    border-right: 1px solid var(--border-color);
    border-radius: var(--border-radius) 0 0 var(--border-radius);
}

:deep(.font-size-button:last-child) {
    border-left: 1px solid var(--border-color);
    border-radius: 0 var(--border-radius) var(--border-radius) 0;
}

:deep(.default-style) {
    font-family: font2;
    font-weight: normal !important;
}

.setting-item {
    display: flex;
    padding: 5px 10px;
    color: var(--font-color);
}

:deep(.el-radio__label) {
    font-weight: normal;
    font-size: 16px !important;
}

:deep(.el-radio-group .el-radio) {
    margin: 0 !important;
}

:deep(.el-radio-group .el-radio+.el-radio) {
    margin-left: 20px !important;
}

:deep(.title) {
    width: 100px;
    justify-content: right;
    padding-right: 10px;
}

:deep(.el-switch__core) {
    font-family: font2;
    font-weight: normal;
}

:deep(.el-select__wrapper) {
    font-weight: normal !important;
}
</style>

<style>
.setting-drawer .el-drawer__body {
    padding: 20px;
}
</style>